<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">


</head>

<body class="">


    <div class="sc-container" id="app">
        <div id="title-wrap">

            <div class="title_left fl">
                <span class="title">模块名称</span>
                <span class="sub-title">子模块</span>
            </div>

            <div class="title_right fr">

                <a class="each" v-on:click.stop="openUrl('http://www.baidu.com')">
                    <i class="fa fa-question-circle"></i>&nbsp;帮助
                </a>

                <a class="each open-win">
                    <Button-group size="small">
                        <i-button type="ghost'" class="curOpen" v-on:click.stop="ChangeHasTop(true)">
                            新标签打开
                        </i-button>
                        <i-button type="ghost" class="curOpen" v-on:click.stop="openUrlNewWidow()">
                            新窗口打开
                        </i-button>
                    </Button-group>
                </a>

            </div>


        </div>

        <div id="top-tips-wrap">
            <Alert type="warning" show-icon closable>
                警告提示文案
                <span slot="icon">
                                        <i class="fa fa-info-circle ft_16"></i>
                                    </span>
            </Alert>
        </div>


        <div id="search-wrap" class="clearfix">

            <!-- 首行 -->
            <div class="search_first_line clearfix">

                <date-picker type="date" placeholder="订单开始日期"></date-picker>
                <date-picker type="date" placeholder="订单开始日期"></date-picker>
                <time-picker type="time" placeholder="选择时间"></time-picker>
                <time-picker type="time" placeholder="选择时间"></time-picker>
                <div class="searchKey_container" style="float:right">
                    <i-input v-model="searchKey" placeholder="请输入要搜索的内容"></i-input>
                    <i-button type="primary">查询</i-button>
                </div>

            </div>

            <!-- 多行 -->
            <div class="search-body clearfix" v-show="searchBodyShow">
                <i-input v-model="value2" placeholder="客户姓名"></i-input>
                <i-input v-model="value2" placeholder="下单手机号"></i-input>
                <i-input v-model="value2" placeholder="出团日期"></i-input>
                <i-input v-model="value2" placeholder="回团日期"></i-input>
                <i-input v-model="value2" placeholder="客户姓名"></i-input>
                <i-input v-model="value2" placeholder="下单手机号"></i-input>
                <i-input v-model="value2" placeholder="出团日期"></i-input>
                <i-input v-model="value2" placeholder="回团日期"></i-input>
            </div>

            <!-- 更多 -->
            <div class="search-more clearfix" v-on:click.stop="searchBodyShowToggle()">
                <i class="fa" v-bind:class="{'fa-angle-double-down':!searchBodyShow,'fa-angle-double-up':searchBodyShow}"></i>
                <span>更多筛选</span>
            </div>


        </div>

        <div id="tools-wrap" class="clearfix">

            <div class="fl">

                <button type="button" class="ivu-btn ivu-btn-primary">
                                                         <span>新增</span>
                                                    </button>

                <button type="button" class="ivu-btn"><span>删除</span></button>

                <button type="button" class="ivu-btn"><!----> <!----> <span>修改</span></button>


            </div>

            <div class="fr tool-right">
                <span>
                                                                    <i class="fa fa-search">&nbsp;</i>预览
                                                                </span>
                <span>
                                                                    <i class="fa fa-print">&nbsp;</i>打印
                                                                </span>
                <span>
                                                                    <i class="fa fa-download">&nbsp;</i>导出
                                                                </span>
            </div>

        </div>

        <div id="list-top-wrap">
            <span>自由发挥</span>
        </div>

        <div class="form-wrap form-wrap-width-leftIcon">

            <div class="fl form-left">
                <div class="line"></div>
            </div>

            <div class="fl  form-right">


                <div class="widget ">
                    <div class="widget-header">

                        <span class="foreIcon">
                                            <i class="fa fa-check-circle sc_green"></i>
                                        </span>

                        <i class="fa fa-arrow-down widget-icon "></i>
                        <span class="widget-caption ft-18">(带右图标)表单填报-第一步</span>
                        <div class="widget-buttons">
                            <a href="#" data-toggle="collapse">
                                <i class="fa fa-angle-double-up">&nbsp;</i>
                                <span class="up_text">收起</span>
                                <span class="down_text">展开</span>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <p>轻轻地我走了,正如我轻轻地来</p>
                        <p>轻轻地我走了,正如我轻轻地来</p>
                        <p>轻轻地我走了,正如我轻轻地来</p>
                        <p>轻轻地我走了,正如我轻轻地来</p>
                    </div>
                </div>



                <div class="widget mt_20">
                    <div class="widget-header">
                        <span class="foreIcon">
                                                    <i class="fa fa-info-circle sc_yellow"></i>
                                                </span>
                        <i class="fa fa-check widget-icon "></i>
                        <span class="widget-caption">(带右图标)表单填报-第二步</span>
                        <div class="widget-buttons">

                            <a href="#" data-toggle="collapse">
                                <i class="fa fa-angle-double-up">&nbsp;</i>
                                <span class="up_text">收起</span>
                                <span class="down_text">展开</span>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body   ">
                        <p>Modal Body</p>
                    </div>
                </div>

                <div class="widget mt_20">
                    <div class="widget-header">
                        <span class="foreIcon">
                                                        <i class="fa fa-info-circle sc_yellow"></i>
                                                    </span>
                        <i class="fa fa-check widget-icon "></i>
                        <span class="widget-caption">(带右图标)表单填报-第二步</span>
                        <div class="widget-buttons">

                            <a href="#" data-toggle="collapse">
                                <i class="fa fa-angle-double-up">&nbsp;</i>
                                <span class="up_text">收起</span>
                                <span class="down_text">展开</span>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body   ">
                        <p>Modal Body</p>
                    </div>
                </div>

                <div class="widget mt_20 ">
                    <div class="widget-header">
                        <span class="foreIcon">
                                                            <i class="fa fa-info-circle sc_yellow"></i>
                                                        </span>
                        <i class="fa fa-check widget-icon "></i>
                        <span class="widget-caption">(带右图标)表单填报-第二步</span>
                        <div class="widget-buttons">

                            <a href="#" data-toggle="collapse">
                                <i class="fa fa-angle-double-up">&nbsp;</i>
                                <span class="up_text">收起</span>
                                <span class="down_text">展开</span>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body   ">
                        <p>Modal Body</p>
                    </div>
                </div>





            </div>
        </div>



        <div id="page-bottom-wrap" class="clearfix">
            <img class="" style="height: 80px; width: 100% " src="../static/images/\innerPage/list-bottom.jpg" />
        </div>

    </div>


    <script src="../static/js/jquery.js"></script>


    <script src="../static/plugins/iview/vue.min.js"></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> -->
    <script src="../static/plugins/iview/locale/zh-CN.js"></script>

    <script src="../static/plugins/iview/iview.min.js"></script>

    <script src="../static/js/suit.js"></script>

    <script src="../static/js/ba-resize.js"></script>

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                changeOpenUrlType: function(type) {
                    this.openUrlType = type;
                },
                //当前打开还是新窗口打开切换
                openUrl: function(url) {


                    if (this.openUrlType) {
                        window.open("http://www.jb51.net"); //在另外新建窗口中打开窗口
                    } else {
                        window.location.href = url;
                    }


                }
            }
        })

        var app = new Vue({
            el: '#app',
            data: {
                searchBodyShow: false,
                curCity: {},
                cityList: [{
                    id: 1,
                    name: '苏州'
                }, {
                    id: 2,
                    name: '上海'
                }, {
                    id: 3,
                    name: '南京'
                }],
                value1: 'value1',
                value2: '',
                value3: 'value3',
                searchKey: '',
                formInline: {
                    user: '33'
                },
                ruleInline: {
                    user: [{
                        required: true,
                        message: '请填写用户名',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请填写密码',
                        trigger: 'blur'
                    }, {
                        type: 'string',
                        min: 6,
                        message: '密码长度不能小于6位',
                        trigger: 'blur'
                    }]
                },
                openUrlType: true,
                columns1: [{
                    title: '姓名',
                    key: 'name'
                }, {
                    title: '年龄',
                    key: 'age'
                }, {
                    title: '地址',
                    key: 'address'
                }],
                data2: [{
                    name: '王小明',
                    age: 18,
                    address: '北京市朝阳区芍药居'
                }, {
                    name: '张小刚',
                    age: 25,
                    address: '北京市海淀区西二旗'
                }, {
                    name: '李小红',
                    age: 30,
                    address: '上海市浦东新区世纪大道'
                }, {
                    name: '周小伟',
                    age: 26,
                    address: '深圳市南山区深南大道'
                }, {
                    name: '王小明',
                    age: 18,
                    address: '北京市朝阳区芍药居'
                }, {
                    name: '张小刚',
                    age: 25,
                    address: '北京市海淀区西二旗'
                }, {
                    name: '李小红',
                    age: 30,
                    address: '上海市浦东新区世纪大道'
                }, {
                    name: '周小伟',
                    age: 26,
                    address: '深圳市南山区深南大道'
                }]
            },
            mounted: function() {
                //折叠面板事件
                InitiateWidgets();

                this.formLeftIconLine();
            },
            methods: {
                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {
                    $(".form-wrap-width-leftIcon .line").animate({
                        opacity: 0.5
                    });

                    setInterval(function() {
                        $(".form-wrap-width-leftIcon .line").animate({
                            opacity: 1
                        });
                    }, 200);
                    $(".form-wrap-width-leftIcon .form-right").resize(function() {
                        var rightWrap = $(".form-wrap-width-leftIcon .form-right").height();
                        var rightWrapLastChild = $(".form-wrap-width-leftIcon .form-right .widget:last-child").height();
                        $(".form-wrap-width-leftIcon .line,.form-wrap-width-leftIcon.form-right").css({
                            height: rightWrap - rightWrapLastChild - 36 + "px"
                        });
                    });
                    $(".form-wrap-width-leftIcon .form-right").trigger('resize');
                }
            }

        });
    </script>

</body>

</html>